<template>
    <!-- 经典场景 -->
    <div class="homeHeader">
        <div class="titleName flexCC">
            <img src="@/assets/logo.png" class="logoImage" alt="">
            后台
        </div>
    </div>
    <div class="homeContent">
        <div class="homeMenu">
            <div v-for="item in MenuData" :key="item.title" class="menuItem"
                :class="item.path === $route.path ? 'active' : ''" @click="$router.push(item.path)">
                <!-- 使用图标并控制颜色大小(不是element) -->
                <SvgIcon :src="item.icon"></SvgIcon>&nbsp;
                {{ item.title }}
            </div>
        </div>
        <div class="sonContent">
            <router-view></router-view>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const MenuData = ref([
    //  {
    //     icon: '/icons/服务器.svg',
    //     title: '服务器资源',
    //     path: '/server'
    // },
    {
        icon: '/icons/upload.svg',
        title: '资源上传',
        path: '/upluads'
    },
    {
        icon: '/icons/folders.svg',
        title: '文件及标签管理',
        path: '/folder'
    },
    {
        icon: '/icons/imageFiles.svg',
        title: '挑选图片',
        path: '/selectImages'
    },
    // {
    //     icon: '/icons/upload.svg',
    //     title: '批量上传解析',
    //     path: '/analysis'
    // }
])
</script>
<style scoped lang="scss">
.homeHeader {
    height: 60px;
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
    // background-color: #eee;
    box-shadow: 2px 2px 2px #ccc;

    .titleName {
        min-width: 200px;

        .logoImage {
            height: 40px;
        }
    }
}

.homeContent {
    height: calc(100vh - 60px);
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;

    .homeMenu {
        width: 200px;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-top: 15px;
        box-shadow: 2px 2px 2px #ccc;

        .menuItem {
            height: 40px;
            margin: 0 15px;
            border-radius: 5px;
            text-align: left;
            line-height: 40px;
            padding: 0 15px;
            font-size: 15px;
            display: flex;
            align-items: center;
            cursor: pointer;

            .iconSvg {
                width: 20px;
                height: 20px;
                margin-right: 10px;
            }
        }

        .active {
            background-color: #3565eb;
            color: #fff;
        }
    }

    .sonContent {
        width: calc(100vw - 200px);
        height: calc(100vh - 60px);
        overflow: hidden;
    }
}
</style>